// 定义常量
$flex-positions: (
  start: flex-start,
  center: center,
  end: flex-end,
  between: space-between,
  around: space-around,
);

// 基础类
.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}

// 生成工具类
@each $name, $value in $flex-positions {
  .flex-#{$name} {
    @extend .flex;
    justify-content: $value;
  }
  .flex-col-#{$name} {
    @extend .flex-#{$name};
    flex-direction: column;
  }
}

// 对齐方式组合
@each $align in (start, center, end) {
  .items-#{$align} {
    align-items: map-get($flex-positions, $align);
  }
}

// 间距
@each $size in (0, 4, 8, 12, 16) {
  .gap-#{$size} {
    gap: #{$size}px;
  }
}

// 快捷方式
.flex-center-all {
  @extend .flex;
  justify-content: center;
  align-items: center;
}
.flex-1 {
  flex: 1;
}
